import React, { Component } from 'react';
import moment from 'moment'; //time格式工厂
import style from './DetailsStyle.less';
import { connect } from 'dva';
import { FormattedMessage, formatMessage } from 'umi/locale'; //此方法引入的数据可以在src/locales中配置
import {

  Input,
  DatePicker,
  Form,
  Row,
  Col,

  Card,
  PageHeader,
  Alert,

  Upload,
  message,
  Icon,
} from 'antd';
import {Select,Button , Table ,Modal,Pagination} from '@/components/CustomAntd'

class DetailsModel extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const {detailData,closeDatailModal} =this.props
    const row = detailData;

    //显示部门
    const showDepts = [];
    let showDeptsEnd = '';
    if (row && row.depts && row.depts.length > 0) {
      for (let i = 0; i < row.depts.length; i++) {
        showDepts.push(row.depts[i].dept_name);
      }
      showDeptsEnd = showDepts.join(',');
    }

    //显示角色
    const showRoles = [];
    let showRolesEnd = '';
    if (row && row.roles && row.roles.length > 0) {
      for (let i = 0; i < row.roles.length; i++) {
        showRoles.push(row.roles[i].role_name);
      }
      showRolesEnd = showRoles.join(',');
    }

    return (
      <div>
        <Modal
          visible={true}
          title="用户详情"
          onCancel={closeDatailModal}
          destroyOnClose={true}
          maskClosable={false}
          bodyStyle={{
            width: 800,
          }}
          width="800px"
          footer={[
            <Button key="submit" type="primary" onClick={closeDatailModal}>
              确定
            </Button>,
          ]}
        >
          {/* 行1 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.user_name' })}：
              </p>
              <p className={style.p2}>{row ? row.user_name : null}</p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.user_account' })}：
              </p>
              <p className={style.p2}>{row ? row.user_account : null}</p>
            </div>
          </div>
          {/* 行2 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.status' })}：
              </p>
              <p className={style.p2}>
                {row ? (row.user_status && row.user_status == 1 ? '正常' : '停用') : null}
              </p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.nick_name' })}：
              </p>
              <p className={style.p2}>{row ? row.nick_name : null}</p>
            </div>
          </div>
          {/* 行3 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.contact_num' })}：
              </p>
              <p className={style.p2}>{row ? row.tel : null}</p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.create_time' })}：
              </p>
              <p className={style.p2}>{row ? row.create_time : null}</p>
            </div>
          </div>
          {/* 行4 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.tenant_name' })}：
              </p>
              <p className={style.p2}>{row ? row.tenant_name : null}</p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.dept_name' })}：
              </p>
              <p className={style.p2}>{row && row.depts ? showDeptsEnd : null}</p>
            </div>
          </div>
          {/* 行5 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.role_names' })}：
              </p>
              <p className={style.p2}>{row && row.roles ? showRolesEnd : null}</p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.sex' })}：
              </p>
              <p className={style.p2}>
                {row && row.sex != '' ? (row.sex == 1 ? '男' : '女') : null}
              </p>
              {/* {row ? row.sex && row.sex == 1? '男': '女' :null} */}
            </div>
          </div>
          {/* 行6 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.brithday' })}：
              </p>
              <p className={style.p2}>{row ? row.birthday : null}</p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_details.age' })}：
              </p>
              <p className={style.p2}>{row ? row.age : null}</p>
            </div>
          </div>
          {/* 行7 */}
          <div className={style['one-line']}>
            <div className={style['one-block']}>
              <p className={style.p1}>
                {formatMessage({ id: 'iot.userManage.userMange_list.user_code' })}：
              </p>
              <p className={style.p2}>{row ? row.user_code : null}</p>
            </div>
            <div className={style['one-block']}>
              <p className={style.p1}>
                其他联系方式：
              </p>
              <p className={style.p2}>{row ? row.other_tel : null}</p>
            </div>
          </div>
		  <div className={style['one-line']}>
			<div className={style['one-block']}>
				<p className={style.p1}>
					邮箱：
				</p>
				<p className={style.p2}>{row ? row.email : null}</p>
			</div>
		  </div>
        </Modal>
      </div>
    );
  }
}

export default DetailsModel;
